<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>Clip剪切蒙版</title>
</head>
<body>
<canvas id="canvas" style="background: #aaaaaa"></canvas>

<canvas id="canvas2" style="background: #aaaaaa"></canvas>
<script>
    function draw1() {

        var ctx = canvas.getContext("2d");
        var rectPath = new Path2D();
        var circlePath = new Path2D();

        rectPath.rect(0, 0, 300, 150);
        circlePath.arc(150, 75, 75, 0, Math.PI * 2, true);//顺时针

        ctx.fill(circlePath);
        ctx.clip(circlePath);

        ctx.fillStyle = "#ff8811";
        ctx.fill(rectPath);

    }

    function draw2() {
        var ctx = document.getElementById("canvas2").getContext("2d");
        ctx.arc(100, 100, 40, 0, 2 * Math.PI, true);
        ctx.clip();//Clip剪切蒙版。将后来图层剪贴到前面
        ctx.beginPath();
        ctx.fillStyle = "lightblue";
        ctx.fillRect(0, 0, 300, 150);
    }

    draw1();
    draw2();
</script>


</body>
</html>